<template>
	<view class="container top">
		<!-- <view class="top-bg">
			<image src="/static/xiao@3x.png" mode="widthFix" class="top-bg-img" />
		</view> -->
		<view style="background-color: #fff; ">
			<view class="form-container">
				<view class="form-item">
					<text class="label">优惠券名称</text>
					<input class="input" v-model="couponForm.name" placeholder="请输入优惠券名称" />
				</view>
				
				<view class="form-item">
					<text class="label">优惠券类型</text>
					<view class="radio-group">
						<view class="radio-item">
							<radio :checked="couponForm.type === 'discount'" @click="switchType('discount')" />
							<text>满减券</text>
						</view>
						<view class="radio-item">
							<radio :checked="couponForm.type === 'direct'" @click="switchType('direct')" />
							<text>打折券</text>
						</view>
					</view>
				</view>
				
				<view class="form-item amount-inputs">
					<text class="label">优惠金额</text>
					<view class="amount-group" v-if="couponForm.type === 'discount'">
						<text>满</text>
						<input class="input amount-input" type="number" v-model="couponForm.fullAmount" placeholder="输入金额" />
						<text>元减</text>
						<input class="input amount-input" type="number" v-model="couponForm.discountAmount" placeholder="输入金额" />
						<text>元</text>
					</view>
					<view class="amount-group" v-else>
						<text>打</text>
						<input class="input amount-input" type="digit" v-model="couponForm.discountRate" placeholder="输入折扣" maxlength="3" />
						<text>折</text>
					</view>
				</view>
				
				<view class="form-item">
					<text class="label">发放开始时间</text>
					<picker mode="date" :value="couponForm.startDate" @change="onStartDateChange">
						<view class="picker-value">{{couponForm.startDate || '请选择开始时间'}}</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="label">发放结束时间</text>
					<picker mode="date" :value="couponForm.endDate" @change="onEndDateChange">
						<view class="picker-value">{{couponForm.endDate || '请选择结束时间'}}</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="label">投放数量</text>
					<input class="input" type="number" v-model="couponForm.quantity" placeholder="请输入投放数量" />
				</view>
				
				<view class="form-item">
					<text class="label">每人限额</text>
					<input class="input" type="number" v-model="couponForm.perLimit" placeholder="请输入每人限领数量" />
				</view>
				
				<view class="form-item">
					<text class="label">使用有效期</text>
					<view class="date-range">
						<picker mode="date" :value="couponForm.validStartDate" @change="onValidStartDateChange">
							<view class="picker-value">{{couponForm.validStartDate || '开始时间'}}</view>
						</picker>
						<text class="separator">至</text>
						<picker mode="date" :value="couponForm.validEndDate" @change="onValidEndDateChange">
							<view class="picker-value">{{couponForm.validEndDate || '结束时间'}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="submit-btn" @click="handleSubmit">
			确认投放
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const couponForm = ref({
	name: '',
	type: 'discount',
	fullAmount: '',
	discountAmount: '',
	discountRate: '',
	startDate: '',
	endDate: '',
	quantity: '',
	perLimit: '',
	validStartDate: '',
	validEndDate: '',
	status: 'ongoing'
});

function switchType(type) {
	couponForm.value.type = type;
	// 切换类型时清空金额相关数据
	couponForm.value.fullAmount = '';
	couponForm.value.discountAmount = '';
	couponForm.value.discountRate = '';
}

function onStartDateChange(e) {
	couponForm.value.startDate = e.detail.value;
}

function onEndDateChange(e) {
	couponForm.value.endDate = e.detail.value;
}

function onValidStartDateChange(e) {
	couponForm.value.validStartDate = e.detail.value;
}

function onValidEndDateChange(e) {
	couponForm.value.validEndDate = e.detail.value;
}

function handleSubmit() {
	// 表单验证
	if (!couponForm.value.name) {
		uni.showToast({
			title: '请输入优惠券名称',
			icon: 'none'
		});
		return;
	}
	
	// 验证金额
	if (couponForm.value.type === 'discount') {
		if (!couponForm.value.fullAmount || !couponForm.value.discountAmount) {
			uni.showToast({
				title: '请输入满减金额',
				icon: 'none'
			});
			return;
		}
	} else {
		if (!couponForm.value.discountRate) {
			uni.showToast({
				title: '请输入折扣率',
				icon: 'none'
			});
			return;
		}
		// 验证折扣率是否在合理范围
		const rate = parseFloat(couponForm.value.discountRate);
		if (rate <= 0 || rate >= 10) {
			uni.showToast({
				title: '折扣率需在0-10之间',
				icon: 'none'
			});
			return;
		}
	}
	
	// 获取现有的优惠券列表
	let coupons = uni.getStorageSync('coupons') || [];
	
	// 添加新优惠券
	coupons.push({
		...couponForm.value,
		id: Date.now(),
		createTime: new Date().toISOString()
	});
	
	// 保存到本地存储
	uni.setStorageSync('coupons', coupons);
	
	// 提示成功
	uni.showToast({
		title: '优惠券创建成功',
		icon: 'success'
	});
	
	// 返回上一页
	setTimeout(() => {
		uni.navigateBack();
	}, 1500);
}
</script>

<style>
.top {
		width: 100%;
		height: 400rpx;
		background-image: url(/static/xiao@3x.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}	
.container {
	padding: 30rpx;
	/* border-radius: 24rpx; */
	width: 690rpx;
}

.form-container {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	z-index: 99;
	width: 670rpx;
	border-radius: 24rpx;
	margin-left: -19rpx;
}

.form-item {
	margin-bottom: 30rpx;
	background-color: #fff;
}

.label {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 15rpx;
	z-index: 11;
}

.input {
	width: 600rpx;
	height: 80rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	background-color: #fff;
}

.radio-group {
	display: flex;
	gap: 30rpx;
}

.radio-item {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.amount-inputs {
	margin-top: 20rpx;
}

.amount-group {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.amount-input {
	width: 200rpx;
}

.picker-value {
	height: 80rpx;
	line-height: 80rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
}

.date-range {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.separator {
	color: #666;
}

.submit-btn {
	margin-top: 50rpx;
	background-color: #007AFF;
	color: #fff;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	border-radius: 44rpx;
	font-size: 32rpx;
}

.top-bg {
	width: 100%;
	height: 220rpx;
	position: relative;
	background: none;
}
.top-bg-img {
	width: 100%;
	height: 220rpx;
/* 	display: block; */
	z-index: -1;
}
</style> 